<template>
    <div>
        <!-- <div v-if="!isMobile" class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><el-icon><House /></el-icon></el-breadcrumb-item>
                <el-breadcrumb-item >Depmap Explore Analysis Images</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <el-descriptions
            title="Depmap Data Analysis Images"
            direction="vertical"
            :column="1"
            size="large"
            border
        >
            <template #extra>
                <el-cascader
                    v-model="selectedValue"
                    :options="options"
                    :props="props"
                    @change="handleChange"
                    :show-all-levels="false"
                    />
            </template>
            <el-descriptions-item label="Wilcoxon Gene Data Image" v-if="selectedValue ==='geneWilcoxon'">
                <div class="chart-container">
                    <v-chart @click="onChartClick"  :option="geneWaldOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Wilcoxon Drug Data Image" v-if="selectedValue ==='drugWilcoxon'">
                <div class="chart-container">
                    <v-chart @click="onChartClick" :option="drugWaldOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Wilcoxon Expression Data Image" v-if="selectedValue ==='expWilcoxon'">
                <div class="chart-container">
                    <v-chart @click="onChartClick" :option="expWaldOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Wilcoxon Protein Data Image" v-if="selectedValue ==='proteinWilcoxon'">
                <div class="chart-container">
                    <v-chart @click="onChartClick"  :option="proteinWaldOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Wilcoxon Methylation Data Image" v-if="selectedValue ==='methyWilcoxon'">
                <div class="chart-container">
                    <v-chart @click="onChartClick"  :option="methyWaldOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Limma Gene Data Image" v-if="selectedValue ==='geneLimma'">
                <div class="chart-container">
                    <v-chart @click="onChartClick"  :option="geneLimmaOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Limma Drug Data Image" v-if="selectedValue ==='drugLimma'">
                <div class="chart-container">
                    <v-chart @click="onChartClick" :option="drugLimmaOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Limma Expression Data Image" v-if="selectedValue ==='expLimma'">
                <div class="chart-container">
                    <v-chart @click="onChartClick" :option="expLimmaOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Limma Protein Data Image" v-if="selectedValue ==='proteinLimma'">
                <div class="chart-container">
                    <v-chart @click="onChartClick" :option="proteinLimmaOption" autoresize />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="Limma Methylation Data Image" v-if="selectedValue ==='methyLimma'">
                <div class="chart-container">
                    <v-chart @click="onChartClick" :option="methyLimmaOption" autoresize />
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup lang="ts" name="Analysis">
    import { onBeforeMount, ref, onMounted } from 'vue';
    import proteinLimmaOption from './options/proteinLimmaOption'
    import proteinWaldOption from './options/proteinWaldOption'
    import drugLimmaOption from './options/drugLimmaOption'
    import drugWaldOption from './options/drugWaldOption'
    import expLimmaOption from './options/expLimmaOption'
    import expWaldOption from './options/expWaldOption'
    import geneLimmaOption from './options/geneLimmaOption'
    import geneWaldOption from './options/geneWaldOption'
    import methyWaldOption from './options/methyWaldOption'
    import methyLimmaOption from './options/methyLimmaOption'

    import { useRoute, useRouter } from 'vue-router';

    import VChart, { THEME_KEY } from 'vue-echarts';
    import type { TabsPaneContext } from 'element-plus'

    let selectedValue = ref('geneWilcoxon')
    let activeName = ref('Wilcoxon')
    let isMobile = ref(window.innerWidth <= 768)
    const router = useRouter()

    const props = {
        expandTrigger: 'hover' as const,
    }

    const options = [
        {
            value: 'Wilcoxon',
            label: 'Wilcoxon',
            children: [
                {
                    value: 'geneWilcoxon',
                    label: 'Wilcoxon Gene Image',
                },
                {
                    value: 'drugWilcoxon',
                    label: 'Wilcoxon Drug Image',
                },
                {
                    value: 'expWilcoxon',
                    label: 'Wilcoxon Expression Image',
                },
                {
                    value: 'proteinWilcoxon',
                    label: 'Wilcoxon Protein Image',
                },
                {
                    value: 'methyWilcoxon',
                    label: 'Wilcoxon Methylation Image',
                },
            ]
        },
        {
            value: 'Limma',
            label: 'Limma',
            children: [
            {
                    value: 'geneLimma',
                    label: 'Limma Gene Image',
                },
                {
                    value: 'drugLimma',
                    label: 'Limma Drug Image',
                },
                {
                    value: 'expLimma',
                    label: 'Limma Expression Image',
                },
                {
                    value: 'proteinLimma',
                    label: 'Limma Protein Image',
                },
                {
                    value: 'methyLimma',
                    label: 'Limma Methylation Image',
                },
            ]
        },
    ]

    const handleChange = (value:any) => {
        selectedValue.value = value[1]
    }

    const onChartClick = (params:any) => {
        if (params.seriesType === 'scatter') {
            const data = params.data
            if (data && data[14] && data[2] != 'No') {
                if (data[14].startsWith('protein')) {
                    // protein类型数据需特殊处理
                    router.push({
                        name: 'depmapExplore',
                        params: {
                            dataType: data[14].split('_')[0],
                            target: data[9] ? data[9] : 'none',
                            tumortype: data[4]? data[4] : 'none',
                        }
                    })
                } else {
                    router.push({
                        name: 'depmapExplore',
                        params: {
                            dataType: data[14].split('_')[0],
                            target: data[3] ? data[3] : 'none',
                            tumortype: data[4]? data[4] : 'none',
                        }
                    })
                }

            }
        }
    };

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }

</script>

<style scoped>
    :deep(.vue-office-pdf-wrapper) {
        background: white !important
    }

    .chart-container{
        height: 70vh;
        width: 100%;
    }

    .container {
        background-color: white;
        padding: 8px;
        border-radius: 4px;

    }

    .breadcrumb {
        margin-bottom: 32px;
    }
</style>